<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="swiper" style="height: height;">
      <SwiperComponent :items="newFoods" :options="options"></SwiperComponent>
      <div class="shop">
        <div class="near">
          <i class="iconfont icon-shangjia"></i>
          <span>
            附近商家
          </span>
        </div>
        <SmallShops_item v-for="(item,index) in shops" :key="index" :shops="item"></SmallShops_item>
      </div>
    </div>

    <TabBar :tabBars="tabBars"></TabBar>
  </div>
</template>
<script>
  import Nav from "@/components/Nav.vue";
  import TabBar from "@/components/TabBar.vue";
  import SmallShops_item from "@/components/SmallShops_item.vue";
  import SwiperComponent from "@/components/SwiperComponent.vue";
  export default {
    data: function () {
      return {
        left_show: false,
        left_name: '搜索',
        title_name: '',
        right_name: '登录',
        height: this.$height,
        arr1: [],
        arr2: [],
        newFoods: [],
        channels: [],
        options: {
          slidesPerView: 1,
          loop: true
        },
        shops: [],
        tabBars: [
          { className: "icon-changyonglogo40", title: "外卖", path: { name: 'Swiper' } },
          { className: "icon-faxian1", title: "搜索", path: { name: 'About' }, query: { latitude: localStorage.getItem("latitude"), longitude: localStorage.getItem("longitude") } },
          { className: "icon-weibiaoti-", title: "订单", path: { name: 'Menu' } },
          { className: "icon-wode", title: "我的", path: { name: "Mine" } },
        ],
      }
    },
    methods: {
      newArray() {
        for (let i = 0; i < this.channels.length; i++) {
          if (i < 8) {
            this.arr1.push(this.channels[i]);
          } else {
            this.arr2.push(this.channels[i]);
          }
        }
        this.newFoods.push(this.arr1);
        this.newFoods.push(this.arr2);
      }
    },
    components: {
      SwiperComponent,
      SmallShops_item,
      Nav,
      TabBar,
    },
    created() {
      localStorage.setItem("latitude", this.$router.history.current.query.latitude)
      localStorage.setItem("longitude", this.$router.history.current.query.longitude)
      if (localStorage.getItem("name")) {
        this.right_name = "头像";
      } else {
        this.right_name = "登录";
      }
      const request = this.axios.get("https://elm.cangdu.org/v2/index_entry");
      const request1 = this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762");
      let lat = this.$route.query.latitude;
      let long = this.$route.query.longitude;
      const request2 = this.axios.get("https://elm.cangdu.org/v2/pois/" + lat + "," + long)
      this.axios.all([request, request1, request2]).then(this.axios.spread((res1, res2, res3) => {
        this.channels = res1.data;
        this.shops = res2.data;
        this.title_name = res3.data.name;
        this.newArray();
      })).catch(err => console.log(err));
    }
  }
</script>
<style lang="less" scoped>
  .near {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    color: gray;
    font-size: 14px;
    margin-left: 10px;
    padding-top: 10px;
  }

  .shop {
    background-color: white;
  }

  .all {
    background-color: rgb(245, 245, 245);
  }
</style>